<template>
  <div class="fence-list">
    <div class="card">
      <el-form inline>
        <el-form-item label="车辆类型：">
          <el-input
            v-model="searchParam.title"
            placeholder="请输入车辆类型"
            clearable
          />
        </el-form-item>

        <el-form-item label="围栏类型：">
          <el-select
            v-model="searchParam.rail_type"
            placeholder="请选择"
            clearable
          >
            <el-option
              label="圆形围栏"
              :value="1"
            />

            <el-option
              label="多边形围栏"
              :value="2"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="card">
      <div class="btn-group">
        <el-button
          type="primary"
          @click="handleCreateFence"
        >
          创建围栏
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column prop="title" label="围栏名称" align="center" />

        <el-table-column prop="rail_type" label="围栏类型" align="center">
          <template v-slot="{ row }">
            {{ getFenceType(row.rail_type) }}
          </template>
        </el-table-column>

        <el-table-column prop="in_rail_alarm" label="进围栏报警" align="center">
          <template v-slot="{ row }">
            <el-tag
              :type="row.in_rail_alarm ? 'success' : 'danger'"
            >
              {{ row.in_rail_alarm ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="out_rail_alarm" label="出围栏报警" align="center">
          <template v-slot="{ row }">
            <el-tag
              :type="row.out_rail_alarm ? 'success' : 'danger'"
            >
              {{ row.out_rail_alarm ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="created_at" label="创建时间" align="center">
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at, 'YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(row)"
            >
              编辑
            </el-button>

            <el-button
              type="danger"
              size="mini"
              @click="handleRemove(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="searchParam.paginate"
          :page="searchParam.page"
          @pagination="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { timeFormat } from '@/utils'
import { getFenceList, removeGpsFence } from '@/api/gps'
import Pagination from '@/components/Pagination/index.vue'

export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      list: [],
      searchParam: {
        name: '',
        rail_type: null,
        paginate: 10,
        page: 1
      },
      total: 0,
      loading: false
    }
  },
  created() {
    this.getFenceList()
  },
  methods: {
    async getFenceList() {
      this.loading = true
      try {
        const res = await getFenceList(this.searchParam)
        console.log('res --------->', res)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error.message || '围栏列表获取失败')
      } finally {
        this.loading = false
      }
    },
    timeFormat,
    getFenceType(type) {
      const typeMap = {
        1: '圆形围栏',
        2: '多边形围栏'
      }

      return typeMap[type ? parseInt(type) : 1]
    },

    handleEdit(row) {
      this.$router.push({
        name: 'fenceCreate',
        query: {
          id: row.id
        }
      })
    },

    handleRemove(row) {
      this.$confirm(
        '是否删除该项？',
        '提示',
        {
          type: 'warning',
          showCancelButton: true,
          showConfirmButton: true,
          cancelButtonText: '取消'
        }
      ).then(() => {
        this.removeFenceFetch({ id: row.id, rail_id: row.rail_id })
      })
    },

    async removeFenceFetch(params) {
      try {
        const res = await removeGpsFence(params.id, { rail_id: params.rail_id })
        this.$message.success('删除成功')
        this.resetSearch()
      } catch (error) {
        this.$message.error(error.response?.data?.message || '删除失败')
      }
    },

    handleCreateFence() {
      this.$router.push({
        name: 'fenceCreate'
      })
    },

    pagination(e) {
      this.searchParam.page = e.page
      this.searchParam.paginate = e.limit
      this.getFenceList()
    },

    handleSearch() {
      this.searchParam.page = 1
      this.getFenceList()
    },

    resetSearch() {
      this.searchParam = this.$options.data().searchParam
      this.getFenceList()
    }

  }
}
</script>
<style lang="scss" scoped>
.fence-list {
  padding: 20px;

  .btn-group {
    margin-bottom: 20px;
  }

  .pagination {
    display: flex;
    justify-content: end;
  }

  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
